import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import store from "../store"

Vue.use(VueRouter)
// 把这段代码直接粘贴到router/index.js中的Vue.use(VueRouter)之前
const originalPush = VueRouter.prototype.push;
VueRouter.prototype.push = function (location) {
  return originalPush.call(this, location).catch(err => { })
};


const routes = [
  // 重定向
  {
    path: "",
    redirect: "/home"
  },
  {
    path: '/home',
    name: 'Home',
    component: Home,
    children: [
      {
        path: '/home/searchpopup/',  //绝对路径
        component: () => import(/* webpackChunkName: "about" */ '../views/SearchPopup.vue')
      }
    ],
    meta: {
      appactiveNum: 0,
      // 是否显示tabbar
      isShowTabbar: true
    }
  },
  {
    path: '/topic',
    name: 'ToPic',
    component: () => import(/* webpackChunkName: "about" */ '../views/ToPic.vue'),
    meta: {
      appactiveNum: 1,
      isShowTabbar: true
    }
  },
  {
    path: '/user',
    name: 'User',
    component: () => import(/* webpackChunkName: "about" */ '../views/User.vue'),
    meta: {
      appactiveNum: 4,
      isShowTabbar: true
    }
  },
  {
    path: '/categroy',
    name: 'Categroy',
    component: () => import(/* webpackChunkName: "about" */ '../views/Categroy.vue'),
    meta: {
      appactiveNum: 2,
      isShowTabbar: true
    }
  },
  {
    path: '/cart',
    name: 'Cart',
    component: () => import(/* webpackChunkName: "about" */ '../views/Cart.vue'),
    meta: {
      appactiveNum: 3,
      isShowTabbar: true
    }
  },
  {
    path: '/productdetails',
    name: 'Productdetails',
    component: () => import(/* webpackChunkName: "about" */ '../views/Productdetails.vue'),
  },
  {
    path: '/brand',
    name: 'Brand',
    component: () => import(/* webpackChunkName: "about" */ '../views/Brand.vue'),
  },
  // {
  //   path: '/about',
  //   name: 'About',
  //   // route level code-splitting
  //   // this generates a separate chunk (about.[hash].js) for this route
  //   // which is lazy-loaded when the route is visited.
  //   component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  // }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

// 全局路由守卫
// 缺点：每一次的路由跳转都会执行，浪费资源
router.beforeEach((to, from, next) => {
  // 什么时候执行这里的代码？
  // 路由跳转时
  // console.log("执行了beforeEach");

  // console.log("to是：",to);  //要去往的路由对象
  // console.log("from是：",from);  //从哪里出发的路由对象
  // 判断是不是要进入购物车
  // if(to.path=="/cart"){
  //   //  console.log("进入到购物车");
  //   // 通过token老判断有没有登录
  //   // 如果没有登录，就跳转到 /user 里面
  //    let token = localStorage.getItem("token");
  //    if(token){
  //      next()
  //    }else{
  //      Vue.prototype.$toast("请先登录！")  //不是组件，所以不能用this.$toast("请先登录！")  用Vue对象的prototype原型就可以找到$toast

  //     // 拿不到token就表示没有登录，跳转到 /user 我的页面
  //      setTimeout(()=>{
  //        next("/user")
  //      },500)
  //    }
  //    return  // 结束掉
  // }
  // // 必须调用next，才能跳转到想要去的页面，没有调用next，就无法跳转到页面

  if (to.path === "/home") {
    // this.changeisShowShadow(false);
    // console.log(store);
    // 利用路由守卫解决 首页遮罩层的bug
    store["_mutations"]["showshadow/changeisShowShadow"][0](false)
  }
  next()
})

export default router
